<template>
  <section>
    <van-nav-bar title="朋友"
                 fixed
                 placeholder
                 @click-right="addFriend"
                 safe-area-inset-top>
      <template #right>
        <van-icon name="plus" size="18" />
      </template>
    </van-nav-bar>
    <van-popup
        v-model:show="showTop"
        :overlay="false"
        position="top"
        style="
        height: 10%;
        width: 32%;
        margin-left: 290px;
        margin-top:50px;
        background-color: #4c4c4c;
        "
        >
      <van-cell title="添加好友" class="cellMenu"  @click="toAddFriends" clickable icon="shop-o">
      </van-cell>
      <van-cell title="申请列表" class="cellMenu" @click="toApplyList" clickable icon="shop-o">
      </van-cell>
<!--      <van-cell title="添加好友" value="点击查看" style="background-color: #4c4c4c; color: white" clickable/>-->
    </van-popup>
  </section>

  <section>
    <van-search placeholder="请输入搜索关键词"/>
  </section>

  <section v-if="friendStore.onlineList.length">
    <van-divider>在线的朋友 轻触可开始视频聊天</van-divider>

    <section v-for="item of friendStore.onlineList"
             :key="item.id">
      <friend-card
                   @click="jumpToVideoCallCallingView(item)">
        {{ item.id }}
        <span style="float: right; color: green" v-if="item.onlineStatus">在线</span>
        <span style="float: right; color: red" v-if="!item.onlineStatus">不在线</span>
      </friend-card>
    </section>
  </section>
</template>

<script setup>
import useFriendStore from "@/store/friend";
import usePeerStore from "@/store/peer";
import FriendCard from "@/components/FriendCard.vue";
import {useRouter} from "vue-router";
import {showToast} from "vant";
import {onMounted, ref} from "vue";
import {friendList} from "@/network/friend";

let friendStore = useFriendStore();
let peerStore = usePeerStore();

const showTop = ref()
let router = useRouter();

function jumpToVideoCallCallingView(row) {
  if (peerStore.localPeer && peerStore.localPeer.open) {
    if (peerStore.dataConnection) {
      showToast("currently busy");
    } else {
      // 获取好友用户id
      var friendId = row.userId == localStorage.getItem("userId")?row.friendUserId.toString():row.userId.toString();
      var friendUserName = row.userId == localStorage.getItem("userId")?row.friendUserName:row.userName;
      console.log(row);
      router.push({
        // path: "/video-call-calling-view",
        path: "/chat-view",
        query: {
          friendId:friendId.toString(),
          friendUserName:friendUserName,
        }
      });
    }
  } else {
    showToast("local peer not opened");
  }
}
function addFriend() {
  console.log("添加好友");
  showTop.value = !showTop.value;
}
function toAddFriends() {
  router.push({
    path: "/add-friend"
  });
}
function toApplyList() {
  router.push({
    path: "/apply-list"
  });
}
function findFriendList() {
  friendList().then(res => {
    console.log(res);
    useFriendStore().onlineList = res.data;
  })
}
onMounted(() => {
  findFriendList()
});
</script>

<style scoped lang="scss">
.cellMenu {
  background-color: #4c4c4c;
  color: white
}
</style>
